<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>展示图片</title>
    <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
        jQuery(function ($) {
            $("#b1").click(function () {
                let path = [[${path}]]+"";
                let s = path.substr(path.lastIndexOf("/")+1);
                window.location.href = "/download?fileName=" + s;

            });
            let res = $("#h1").val();  //[lisa_left.jpeg, 阳光沙滩.jpeg]
            let arr = res.replace("[","").replace("]","").split(",");
            console.log(arr);
            let length = arr.length;
            let index = 0;
            $("#img").prop("src","/download?fileName=" + $.trim(arr[index]));
            $("#bb2").click(function () {
                /*$.ajax({
                    url:"/download",
                    data:{
                        index:index
                    },
                    success(data){
                        $("#img").prop("src",data);
                    },
                    error(){
                        alert("服务器繁忙，请稍后再试")
                    }
                });*/
                if (index >= length-1){return}
                index++;
                $("#img").prop("src","/download?fileName=" + $.trim(arr[index]));
                $("#desc").html(arr[index]);
            });
            $("#bb1").click(function () {
                /*$.ajax({
                    url:"/download",
                    data:{
                        index:index
                    },
                    success(data){
                        $("#img").prop("src",data);
                    },
                    error(){
                        alert("服务器繁忙，请稍后再试")
                    }
                });*/
                if (index <= 0){return}
                index--;
                $("#img").prop("src","/download?fileName=" + $.trim(arr[index]));
                $("#desc").html(arr[index]);
            });
        });
    </script>
</head>
<body>
    <input id="h1" type="hidden" th:value="${fileNames}">
    <!--<div th:each="f:${fileNames}">
        <div style="padding-top: 20%;padding-left: 20%;padding-right: 20%;padding-bottom: 10%">
            <img id="img" th:if="${fStat.count eq 1}" height="100%" width="100%"  alt="null">
        </div>

    </div>-->
    <div style="padding-top: 20%;padding-left: 20%;padding-right: 20%;padding-bottom: 10%">
        <img id="img" height="100%" width="100%"  alt="null">
        <h5 id="desc"></h5>
    </div>
    <button id="bb1">上一张</button>
    <button id="bb2">下一张</button>

    <button id="b1">下载</button>
</body>
</html>